<template>
  <div id="login_panel">
    <h1 class="login_panel_title">众众图书管理系统</h1>
    <el-tabs type="border-card">
      <el-tab-pane>
        <template #label>
          <span><el-icon class="iconfont">&#xe788;</el-icon>账号密码登录</span>
        </template>
        <login-username />
      </el-tab-pane>
      <el-tab-pane label="Config">
        <template #label>
          <span><el-icon class="iconfont">&#x3457;</el-icon>验证码登录</span>
        </template>
        <login-phone />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

import LoginUsername from '@/components/login/LoginUsername.vue';
import LoginPhone from '@/components/login/LoginPhone.vue';

export default defineComponent({
  components: { LoginPhone, LoginUsername },
  setup() {
    const accountRef = ref();
    const handleLoginClick = () => {
      console.log('立即登录');
    };
    return {
      handleLoginClick,
      accountRef
    };
  }
});
</script>

<style scoped>
#login_panel {
  width: 350px;
}
.login_panel_title {
  text-align: center;
  line-height: 50px;
}
</style>
